<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人才列表</title>
    <!--    <link rel="stylesheet" href="../../assets/libs/layui_ext/dtree/dtree.css">-->
    <!--    <link rel="stylesheet" href="../../assets/libs/layui_ext/dtree/font/dtreefont.css">-->
</head>
<style type="text/css">
    div[xm-select-skin] .xm-select-title div.xm-select-label > span {
        /* border: 1px solid #009688; */
        height: 23px;
        padding-top: -5px;
        /*z-index: 10000000;*/
    }
</style>
<body>
<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">人员列表</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#!console">首页</a>
          <a><cite>人员列表</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <h3 class="header-title"><span style="font-weight: bolder">条件查询</span>(行业，职业人才搜索)</h3>
        <form class="layui-form toolbar" lay-filter="industry_form">
            <div style="display: inline-block" id="industry-box1">

            </div>
            <div style="display: inline-block;width: fit-content" id="industry-box2">

            </div>

            <button lay-submit lay-filter="btn-search" type="button" id="btn-search" class="layui-btn icon-btn"><i
                    class="layui-icon">&#xe615;</i>搜索
            </button>

        </form>

        <table class="layui-table" id="talented-table" lay-filter="talented-table"></table>
        <ul id="dtree"></ul>
    </div>
</div>

<script type="text/html" id="sex">
    {{#  if(d.sex === 0){ }}
    男
    {{#  } }}
    {{#  if(d.sex === 1){ }}
    女
    {{#  } }}
</script>
<script type="text/html" id="i_edit">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>
<script>

    layui.use(['config', 'form', 'admin', 'table', 'formSelects', 'jquery'], function () {

        let config = layui.config,
            table = layui.table,
            form = layui.form,
            $ = layui.jquery,
            admin = layui.admin,
            formSelects = layui.formSelects;
        localStorage.setItem('token', config.getToken().access_token)
        //加载行业列表
        loadIndustry(config.base_server + "api-talented/talented/industryByParentId", JSON.stringify(0), function (xhr) {
            let token = localStorage.getItem('token')
            xhr.setRequestHeader('Authorization', 'Bearer ' + token);
        }, function (result) {
            console.log(result)
            let data = result.data;
            let html = '<select id="industry-1"  name="i-xm" xm-select="i1-xm" lay-filter="industry-1">';

            html += '<option value="">请选择行业</option>'
            for (let i = 0; i < data.length; i++) {
                if (data[i].pid === 0) {
                    html += " <option value=\"" + data[i].id + "\" >" + data[i].industryName + "</option>"
                }
            }
            html += "</select>"
            $("#industry-box1").append(html)
            // console.log($("#industry-1").find('option').html())
            formSelects.render()
            form.render()
        }, 'get')

        //根据行业列表渲染对应职业
        formSelects.on('i1-xm', function (id, vals, val, isAdd, isDisabled) {
            let params = []
            if (isAdd) {
                params.push(val.val)
                for (let valsKey in vals) {
                    params.push(vals[valsKey].val)
                }
            } else {
                for (let valsKey in vals) {
                    params.push(vals[valsKey].val)
                }
                params.splice($.inArray('b', params), 1);
            }
            console.log(params)

            loadIndustry(config.base_server + "api-talented/talented/industryByIds", JSON.stringify(params), function (xhr) {
                let token = localStorage.getItem('token')
                xhr.setRequestHeader('Authorization', 'Bearer ' + token);
            }, function (result) {
                $("#industry-box2").html("")
                let data = result.data;
                let html = '<select xm-select-skin="warm" id="industry-2"  name="i-xm" xm-select="i2-xm" lay-filter="industry-2">';
                html += '<option value="">请选择职业</option>'
                if (data) {
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].pid === 0) {
                            html += "<optgroup label=\"" + data[i].industryName + "\">"
                            for (let j = 0; j < data.length; j++) {
                                if (data[j].pid === data[i].id) {
                                    html += "<option value=\'" + data[j].id + "\' selected>" + data[j].industryName + "</option>"
                                }
                            }
                            html += "</optgroup>"
                        }
                        // html += " <option value=\"" + data[i].id + "\" >" + data[i].industryName + "</option>"
                    }
                }
                html += "</select>"
                $("#industry-box2").append(html)
                formSelects.render();
            }, 'get')

        });

        form.on('submit(btn-search)', function (data) {
            let array1 = formSelects.value('i2-xm', 'val');       //取值val数组
            let array2 = formSelects.value('i1-xm', 'val');       //取值val数组
            let params = {
                industryIds: array1.concat(array2),
                enabled: 1
            }
            $.ajax({
                url: config.base_server + "api-talented/talented/listByIndustryIds",
                data: JSON.stringify(params),
                type: "post",
                beforeSend: function (xhr) {
                    let token = config.getToken().access_token
                    xhr.setRequestHeader('Authorization', 'Bearer ' + token);
                },
                done: function () {
                    formSelects.btns(['skin']);
                    formSelects.render({
                        height: "40"
                    });
                    $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible')
                },
                contentType: "application/json",
                success: function (result) {
                    console.log("行业人才：", result)
                    table.render({
                        id: "#talented-table",
                        elem: "#talented-table",
                        data: result.data,
                        done: function () {
                            formSelects.render()
                        },
                        cols: [[
                            {
                                sort: true, title: '行业', templet: function (res) {
                                    let array = res.industryList;

                                    let html = ''
                                    for (let i = 0; i < array.length; i++) {
                                        if (array[i].pid === 0) {
                                            html += "<option selected=\"selected\" value=\'" + array[i].industryName + "\' disabled=\"disabled\">" + array[i].industryName + "</option>"
                                        }
                                    }
                                    let content = "<select  disabled name=\"city\" xm-select=\"" + res.id + "-x" + "\">" + html + "</select>"
                                    return content
                                }
                            },
                            {
                                sort: true, title: '职业', templet: function (res) {
                                    let data = res.industryList;
                                    let html = ''
                                    for (let i = 0; i < data.length; i++) {
                                        if (data[i].pid !== 0) {
                                            html += "<option selected=\"selected\" value=\'" + data[i].industryName + "\' disabled=\"disabled\">" + data[i].industryName + "</option>"
                                        }
                                    }
                                    let content = "<select xm-select-skin=\"warm\" disabled name=\"city\" xm-select=\"" + res.id + "\">" + html + "</select>"
                                    // console.log(content)
                                    return content
                                }
                            },
                            {field: 'id', sort: true, title: '用户编号'},
                            {field: 'nickName', sort: true, title: '姓名'},
                            {
                                field: 'sex', sort: true, title: '性别', templet: function (res) {
                                    if (res.sex === 0) {
                                        return "男";
                                    } else if (res.sex === 1) {
                                        return "女";
                                    }
                                    return "无"
                                }
                            },
                        ]]
                    })
                }
            })


            //提交表单
        })


        table.render({
            id: "#talented-table",
            elem: "#talented-table",
            url: config.base_server + "api-talented/talented/list",
            where: {
                access_token: config.getToken().access_token,
                enabled: 1
            },
            parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.message,
                    "data": res.data.list,
                    "count": res.data.total
                }
            },
            page: true,
            done: function () {
                formSelects.btns(['skin']);
                formSelects.render({
                    height: "40"
                });
                $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible');
            },
            cols: [[
                {field: 'id', type: "", sort: true, title: '用户编号'},
                {field: 'nickName', title: '用户名'},
                {field: 'phone', title: '电话'},
                {field: 'sex', title: '性别', toolbar: "#sex"},
                {field: 'createTime', title: '注册时间'},
                {
                    title: '所在行业', templet: function (res) {
                        let data = res.industryList;
                        let html = ''
                        for (let i = 0; i < data.length; i++) {
                            if (data[i].pid === 0) {
                                html += "<optgroup label=\"" + data[i].industryName + "\">"
                                for (let j = 0; j < data.length; j++) {
                                    if (data[j].pid === data[i].id) {
                                        html += "<option selected=\"selected\" value=\'" + data[j].id + "\' disabled=\"disabled\">" + data[j].industryName + "</option>"
                                    }
                                }
                                html += "</optgroup>"
                            }
                        }
                        let content = "<select xm-select-skin=\"warm\" name=\"city\" xm-select=\"" + res.id + "\">" + html + "</select>"
                        // console.log(content)
                        return content
                    }
                },
                {fixed: 'right', title: '操作', toolbar: "#i_edit"}
            ]]

        })

        function editIndustry(array, id) {
            let initParams = []
            initParams = array
            loadIndustry(config.base_server + "api-talented/talented/industryListAll", JSON.stringify(0), function (xhr) {
                let token = localStorage.getItem('token')
                xhr.setRequestHeader('Authorization', 'Bearer ' + token);
            }, function (result) {
                let array = result.data;
                let html1 = ''
                let html2 = ''
                for (let i = 0; i < array.length; i++) {
                    if (i === 0) {
                        html1 += "<select name=\"city\" xm-select=\"" + "xm-edit1-x" + "\">"
                    }
                    if (array[i].pid === 0) {
                        html1 += "<option selected=\"selected\" value=\'" + array[i].id + "\'>" + array[i].industryName + "</option>"
                    }
                    if (i === array.length) {
                        html1 += "</select>"
                    }
                }

                for (let i = 0; i < array.length; i++) {
                    if (i === 0) {
                        html2 += "<select xm-select-skin=\"warm\" name=\"city\" xm-select=\"" + "xm-edit2-x" + "\">"
                    }
                    if (array[i].pid === 0) {
                        html2 += "<optgroup label=\"" + array[i].industryName + "\">"
                        for (let j = 0; j < array.length; j++) {
                            if (array[j].pid === array[i].id) {
                                html2 += "<option selected=\"selected\" value=\'" + array[j].id + "\'>" + array[j].industryName + "</option>"
                            }
                        }
                        html2 += "</optgroup>"
                    }
                    if (i === array.length) {
                        html2 += "</select>"
                    }
                }

                console.log("html1", html1)
                console.log("html2", html2)
                $("#i1_xm_edit").append(html1)
                $("#i2_xm_edit").append(html2)
                formSelects.value('xm-edit1-x', initParams);
                formSelects.value('xm-edit2-x', initParams);
                formSelects.render();
            })
            layer.open({
                id: 'i_edit_form',
                title: "编辑",
                area: ['400px', '700px'],
                content: "<form class=\"layui-form\">\n" +
                    "    <div class=\"\">\n" +
                    "        <div class=\"layui-form-item\">" +
                    "<div class='layui-form-label'>用户id</div>" +
                    "<div class='layui-input-inline'>" +
                    "<input id='iid_edit' type='text' value=\'" + id + "\' readonly>" +
                    "</div>" +
                    "</div>\n" +
                    "        <div class=\"layui-form-item\" id=\"i1_xm_edit\"></div>\n" +
                    "        <div class=\"layui-form-item\" id=\"i2_xm_edit\"></div>\n" +
                    "    </div>\n" +
                    "</form>",
                btn: ['好笑吗'],
                yes: function (index, layero) {
                    let select1 = layui.formSelects.value('xm-edit1-x', 'val');
                    let select2 = layui.formSelects.value('xm-edit2-x', 'val');

                    let param1 = select1.concat(select2)
                    let param2 = $("#iid_edit").val()

                    let params = {
                        userId: param2,
                        industryIds: param1
                    }
                    $.ajax({
                        url: config.base_server + "api-talented/talented/editByUserId",
                        data: JSON.stringify(params),
                        beforeSend: function (xhr) {
                            let token = config.getToken().access_token
                            console.log("token", token)
                            xhr.setRequestHeader('Authorization', 'Bearer ' + token);
                        },
                        type: "post",
                        contentType: "application/json",
                        success: function (result) {
                            // alert(result.msg)
                            layer.msg(result.msg, {icon: 1, time: 1000}, function (index) {
                                // layer.closeAll()
                                let parentIndex = parent.layer.getFrameIndex(window.name)
                                parent.layer.close(parentIndex)
                            })
                        }
                    })
                }
            })
        }

        form.render();
        table.on('tool(talented-table)', function (obj) {
            if (obj.event === 'edit') {
                loadIndustry(config.base_server + "api-talented/talented/IndustryIdsByUserId", JSON.stringify(obj.data.id), function (xhr) {
                    let token = localStorage.getItem('token')
                    xhr.setRequestHeader('Authorization', 'Bearer ' + token);
                }, function (result) {
                    editIndustry(result.data, obj.data.id);
                })
            }
        })


    })

    function loadIndustry(url, param, before, success) {
        $.ajax({
            url: url,
            beforeSend: before,
            data: param,
            type: "post",
            dataType: "json",
            contentType: 'application/json',
            // async:false,
            success: success
        })
    }

</script>
</body>
</html>